<template>
  <div class="login">
    <a-modal
      v-model:visible="userStore.visible"
      @ok="handleOk"
      @cancel="handleCancel"
      draggable
      title-align="start"
      width="750px"
    >
      <template #title> 登录Mika医疗系统 </template>
      <!-- 对话框身体部分结构 -->
      <div class="content">
        <a-row>
          <a-col :span="12">
            <div class="login-box" v-if="!isLoginByWechat">
              <a-form
                :model="form"
                :style="{ width: '100%' }"
                layout="horizontal"
              >
                <a-col :span="24">
                  <a-form-item
                    :rules="rules.phoneRule"
                    label-col-flex="0px"
                    field="phone"
                  >
                    <a-input
                      v-model="form.phone"
                      placeholder="请输入手机号码..."
                    >
                      <template #prefix><icon-phone /></template>
                    </a-input> </a-form-item
                ></a-col>
                <a-form-item
                  :rules="rules.codeRule"
                  label-col-flex="0px"
                  field="code"
                >
                  <a-input
                    v-model="form.code"
                    placeholder="请输入验证码..."
                    :disabled="!isAvailablePhone"
                  >
                    <template #prefix> <icon-message /> </template
                  ></a-input>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="text"
                    :disabled="!isAvailablePhone"
                    @click="getCode"
                    v-if="!isShowCountDown"
                    >获取验证码</a-button
                  >
                  <count-down
                    :time="5"
                    :text="'获取验证码'"
                    @change-show-count-down="changeShowCountDown"
                    v-else
                  ></count-down>
                </a-form-item>
              </a-form>
              <div class="bottom">
                <a-button
                  type="primary"
                  @click="login"
                  :disabled="!(isAvailablePhone && form.code.length == 6)"
                  >登录</a-button
                >
                <p @click="changeLoginMethod(true)">微信扫码登录</p>
                <icon-wechat @click="changeLoginMethod(true)" />
              </div>
            </div>
            <div class="login-box" v-else>扫码登录</div>
          </a-col>
          <a-col :span="12">
            <div class="left-content">
              <div class="top">
                <div class="item">
                  <img src="@/assets/imgs/qr-code/code_login_wechat.png" />
                  <p>微信扫一扫关注</p>
                  <p>" 快速预约挂号 "</p>
                </div>
                <div class="item">
                  <img src="@/assets/imgs/qr-code/code_app.png" />
                  <p>扫一扫下载</p>
                  <p>"预约挂号"app</p>
                </div>
              </div>
            </div>
            <p class="tip">Mika官方指定平台</p>
            <p class="tip">快速挂号, 安全放心</p>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { reqUserCode } from "@/api/hospital";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";
import { reactive, computed } from "vue";
import countDown from "@/components/count-down/index.vue";
import { LoginData } from "@/api/hospital/type";

const userStore = useUserStore();

const isLoginByWechat = ref<boolean>(false);
const isShowCountDown = ref<boolean>(false);

const changeLoginMethod = (value: boolean) => {
  isLoginByWechat.value = value;
};

const handleOk = () => {
  userStore.visible = false;
};

const handleCancel = () => {
  userStore.visible = false;
};

const form = reactive<LoginData>({
  phone: "",
  code: "",
});

const rules = reactive<any>({
  phoneRule: [
    { required: true, message: "请输入手机号" },
    { match: /^1[34578]\d{9}$/, message: "请输入正确的手机号" },
  ],
  codeRule: [
    { required: true, message: "请输入验证码" },
    { minLength: 6, maxLength: 6, message: "请输入6位验证码" },
  ],
});

// 计算当前表单的手机号一栏里输入的是不是合法的手机号
let isAvailablePhone = computed(() => {
  return /^1[34578]\d{9}$/.test(form.phone);
});

const changeShowCountDown = (value: boolean) => {
  isShowCountDown.value = value;
};

const getCode = async () => {
  changeShowCountDown(true);
  let { data } = await reqUserCode(form.phone);
  form.code = data;
};

const login = () => {
  userStore.userLogin(form);
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 0;
  .login-box {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 25px;

    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        margin: 10px 0;
        color: #7f7f7f;
        font-size: 12px;
      }
    }
  }
  .left-content {
    padding: 0 20px;
    .top {
      display: flex;
      justify-content: space-between;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          margin: 2px 0;
        }
      }
    }
  }

  .tip {
    text-align: center;
    margin: 2px;
    font-size: 18px;
    font-weight: 900;
  }
}
</style>
